<template>
  <div id="home">
    <!-- 顶部导航栏 -->
    <nav-bar class="home-nav">
      <template v-slot:center>
        <div>购物街</div>
      </template>
    </nav-bar>
    <div class="home-body">
      <tab-control
          :titles="titles"
          @tabClick="tabClick"
          ref="tabControl" class="tabControl" v-show="isTabFixed" :tab-index="index"
        ></tab-control>
      <scroll class="scroll-wrapper" ref="scroll" 
      :probe-type="3" @scrollPosition="scrollPosition" 
      :pull-up-load="true"  @pullingUp="pullingUp">
        <!-- 轮播图 -->
        <home-swiper :banners="banners" @swiperImageUpLoad="swiperImageUpLoad"></home-swiper>
        <!-- 推荐信息 -->
        <home-recommend-view :recommends="recommends"></home-recommend-view>
        <!-- 本周推荐 -->
        <feature-view></feature-view>
        <!-- tab-contorl -->
        <tab-control
          :titles="titles"
          @tabClick="tabClick"
          ref="tabControl" :tab-index="index"
        ></tab-control>
        <!-- 商品列表 -->
        <good-list :goods="showGoods"></good-list>
      </scroll>
      <!-- 组件监听点击事件 组件的点击事件有夹.native-->
      <back-top @click.native="backClick" v-show="isShow"></back-top>
    </div>
  </div>
</template>

<script>
//顶部导航栏组件引入
import NavBar from "components/common/navbar/NavBar.vue";
//tab-contorl组件引入
import TabControl from "components/content/tabControl/TabControl.vue";
//引入Scroll滚动组件
import Scroll from "components/common/scroll/Scroll.vue";
//引入返回顶部组件
import BackTop from "components/content/backTop/BackTop.vue"

//轮播图组件引入
import HomeSwiper from "views/home/childComps/HomeSwiper.vue";
//推荐信息组件引入
import HomeRecommendView from "views/home/childComps/HomeRecommendView.vue";
//本周推荐组件引入
import FeatureView from "views/home/childComps/FeatureView.vue";
//商品列表组件引入
import GoodList from "components/content/goods/GoodsList.vue";

//请求数据--轮播图，推荐信息,商品列表信息
import { getHomeMultidata, getHomeGoods } from "network/home";

// //导入防抖函数
// import {debounce} from '../../common/utils'
//导入混入函数
import {itemListenerMixin,backTopMixin} from '../../common/mixin'

export default {
  name: "Home",
  data() {
    return {
      banners: [],
      recommends: [],
      titles: ["流行", "新款", "精选"],
      goods: {
        //商品数据列表
        pop: { page: 0, list: [] },
        new: { page: 0, list: [] },
        sell: { page: 0, list: [] },
      },
      currentType: "pop",
      // isShow: false,
      tabOffsetTop:0,
      isTabFixed:false,
      index:0,
      saveY:0,
      // itemImgListener:null
    };
  },
  components: {
    //注册组件，方能用组件
    NavBar,
    HomeSwiper,
    HomeRecommendView,
    FeatureView,
    TabControl,
    GoodList,
    Scroll,
    BackTop
  },
  computed: {
    showGoods() {
      return this.goods[this.currentType].list;
    },
  },
  created() {
    //home组件创建完成后，发送axios网络请求，获取数据
    //1.请求多个数据
    this.getHomeMultidataM();

    //2.请求商品数据
    this.getHomeGoodsM("pop");
    this.getHomeGoodsM("new");
    this.getHomeGoodsM("sell");
  },
  mounted() {
    // const refresh = debounce(this.$refs.Scroll.refresh,200,this)
    
    // //对监听的全局事件做保存
    // this.itemImgListener = ()=>{
    //   // console.log('图片加载完成');
    //   //图片加载后，刷新内容
    //   refresh()
    // }

    // //3.监听图片加载完成
    // this.$bus.$on('itemImageLoad',this.itemImgListener)
  },
  mixins:[itemListenerMixin,backTopMixin],
  activated(){
    this.$refs.scroll.scrollTo(0,this.saveY,0)
    this.$refs.scroll.refresh()
  },
  deactivated(){
    //1.保存Y值
    this.saveY = this.$refs.scroll.getScrollY()
    //2.取消全局事件的监听
    this.$bus.$off('itemImageLoad',this.itemImgListener)
  },
  methods: {
    /*
      网络请求的相关方法
     */
    getHomeMultidataM() {
      getHomeMultidata()
        .then((res) => {
          //这里的箭头函数会向上层找有定义this值的地方，并将其this值给自己函数内的this
          this.banners = res.data.banner.list;
          this.recommends = res.data.recommend.list;
          //图片加载后，刷新内容
          this.$refs.scroll.refresh()
        })
        .catch((err) => {
          console.log(err);
        });
    },

    getHomeGoodsM(type) {
      const page = this.goods[type].page + 1;
      getHomeGoods(type, page)
        .then((res) => {
          this.goods[type].list.push(...res.data.list); //要用响应式方法更改数据 存储请求过来的全部数据
          this.goods[type].page = page;
          //  console.log(res.data.list);
          //图片加载后，刷新内容
          this.$refs.scroll.refresh()
        })
        .catch((err) => {
          console.log(err);
        });
    },

    /*
    事件监听相关的方法
    */

    tabClick(index) {
      this.index = index
      switch (index) {
        case 0:
          this.currentType = "pop";
          break;
        case 1:
          this.currentType = "new";
          break;
        case 2:
          this.currentType = "sell";
          break;
      }
    },

    // //点返回顶部事件
    // backClick(){
    //   this.$refs.scroll.scrollTo(0,0,500)//500毫秒 回到顶部
    // },

    //监听滚动事件获取坐标，决定返回顶部组件是否显示 和 tab-control 的样式是否为fixed
    scrollPosition(value){
      //1.backTop
      this.isShow = (value.y < -1500) ? true : false
      //2.tabControl
      this.isTabFixed = (-value.y) > this.tabOffsetTop
    },

    //监听上拉加载更多，去获取数据
    pullingUp(){
      this.getHomeGoodsM(this.currentType)
      // //图片加载后，刷新内容
      // this.$refs.Scroll.refresh()
      //上拉加载完成后，要调用这个函数，可以让下一次上拉加载成功
      this.$refs.scroll.finishPullUp()
    },

    //防抖函数
  //   debounce(func, delay) { //参数为 函数 ， 等待时间
  //     let timer = null
  //     // let _this = this
  //     //利用闭包
  //    return (...args) => {
  //       if (timer) {
  //         clearTimeout(timer)
  //       }
  //       timer = setTimeout(() => {
  //       // console.log(this);
  //       func.apply(this, args)
  //      }, delay)
  //   }
  //  },

  //tab-control 吸顶效应
  swiperImageUpLoad(){
    // console.log(this.tabOffsetTop = this.$refs.tabControl.$el.offsetTop);
    this.tabOffsetTop = this.tabOffsetTop = this.$refs.tabControl.$el.offsetTop
  }

  },
};
</script>

<style>
#home {
  height: calc(100vh - 49px);
}

.home-nav {
  background-color: var(--color-tint);
  color: #fff;
  width: 100%;
}
.home-body {
  position: relative;
  margin-top: 46px;
  width: 100%;
  height: 100%;
}
.scroll-wrapper {
  height: calc(100% - 46px);
  overflow: hidden;
}

.tabControl {
  position:absolute;
  top: 0;
}
</style>
